<template>
  <div class="Header">

    <div id="Logo">
      <div id="LogoContent">
        <router-link to="/main"><a><img src="../assets/images/logo_2.png"></a></router-link>
      </div>
    </div>

    <div id="Menu">
      <div id="MenuContent">
        <ul class="shell">
          <router-link to="/main"><img class="top_pic" src="../assets/images/home.png"> 首页</router-link>
          <li class="shellbutton">
            <span><img class="top_pic" src="../assets/images/category.png">&ensp;分类</span>
            <ul>
              <li><router-link :to="{name:'category',params:{name:'CHEESS'}}">乳酪</router-link></li>
              <li><router-link :to="'/main/category/CHOCOLATE'">巧克力</router-link></li>
              <li><router-link :to="{name:'category',params:{name:'FRUIT'}}">水果</router-link></li>
              <li><router-link :to="{name:'category',params:{name:'MUSI'}}">慕斯</router-link></li>
              <li><router-link :to="{name:'category',params:{name:'NUT'}}">坚果</router-link></li>
            </ul>
          </li>
          <!--th:href="@{listOrders(username=${session.account.username})}" -->
          <router-link to="/main/cart" v-show="account"><img class="top_pic" src="../assets/images/cart.png">&ensp;购物车</router-link>
          <router-link to="/main/order" v-show="account"><img class="top_pic" src="../assets/images/order.png" >&ensp;我的订单</router-link>
          <router-link to="/main/account" v-show="account"><img class="top_pic" src="../assets/images/myinf.png" >&ensp;我的信息</router-link>
        </ul>
      </div>
    </div>


    <div id="Search">
      <div id="SearchContent">
        <a>
          <input id="SearchBox" type="text" name="keyword" placeholder="输入产品名" size="14" ref="word">
          <el-button @click="handleSearch(word.value)" style="margin-right: 35px;"> 搜索 </el-button>
        </a>
        <a v-show="!account" >
        <router-link to="/main/signOn">登录 </router-link>
        <router-link to="/main/register">注册</router-link>&nbsp&nbsp&nbsp&nbsp&nbsp
        </a>
        <a v-show="account" @click="sign_out">登出</a>
<!--        需要登出信息全部设为null-->
<!--        &lt;!&ndash; {{$store.state.searchWord}} &ndash;&gt;-->
        <div id="productAutoComplete">
          <li class="autoshell">

            <ul id="productList">
            </ul>
          </li>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>

import {onMounted, ref,onBeforeMount} from "vue"

import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
// import api from "../api/index"
// import getDatas from "../views/main/SearchProduct.vue"
// const emit = defineEmits(['change'])
// const products = reactive([])


const router = useRouter()
const word = ref()
const store = useStore()

//检验是否登录
const account = ref(null)


//从登录跳转过来之后进入不到setup方法，不会修，大家谁能修修一下吧
onBeforeMount(() => {

  const storedAccountJson = sessionStorage.getItem('user')
  const storedAccount = JSON.parse(storedAccountJson)
  if (storedAccount) {
    account.value = storedAccount


  }
})


const sign_out = () =>{
  sessionStorage.setItem('user',JSON.stringify(null))
  account.value = null
  console.log(account)

  router.push('/main/mainPage')

}


const handleSearch = (word) => {
  store.commit("setSearchWord", word)
  console.log(store.state.searchWord)
  router.push({path:`/main/searchProduct/${word}`})
  store.commit('setChange',!store.state.change);
  // getData(word)
}
// const getData = (word) => {
//   api.getProductsByName(word).then(res => {
//     // products.splice(0, products.length)
//     // products.push(...res.data.data)
//     // console.log(products[0].name);
//     store.commit("setSearchWord", res.data.data)
//     console.log(getDatas());
//     // console.log(store.state.searchWord[0].name);
//     // emit('change','刷新页面')
//     // emit('change')
//     // this.emit('refresh')
//     //router.go(0)
//   })
// }

</script>

